<template>
	<div class="order layout-pd">
		<el-row>
			<!-- 基础信息 -->
			<el-col :span="24" class="order-info">
				<el-card shadow="hover">
					<template #header>
						<span>基础信息</span>
					</template>
					<div class="order-info-box">
						<el-form :model="state.orderData"  label-width="80px" label-position="left">
							<el-row :gutter="35">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
									<el-row :gutter="35">
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="订单号">
												<span>{{ state.orderData.serviceOrderInfo?.serviceSnkey }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="服务时间：">
												<span>{{ state.orderData.serviceOrderInfo?.serviceTime }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="操作时间">
												<span>{{ state.orderData.serviceOrderInfo?.createTime }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="订单状态">
												<span>{{ state.orderData.serviceOrderInfo?.status }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="操作终端">
												<span>{{ state.orderData.serviceOrderInfo?.device }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="订单来源">
												<span>{{ state.orderData.serviceOrderInfo?.source }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="销售门店">
												<span>{{ state.orderData.serviceOrderInfo?.serviceNode }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="操作员工">
												<span>{{ state.orderData.serviceOrderInfo?.createdBy }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="IP">
												<span>{{ state.orderData.serviceOrderInfo?.ip }}</span>
											</el-form-item>
										</el-col>
										
									</el-row>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</el-card>
			</el-col>

			<!-- 会员信息 -->
			<el-col :span="24" class="order-info">
				<el-card shadow="hover" class="mt15">
					<template #header>
						<span>会员信息</span>
					</template>
					<div class="order-info-box">
						<el-form :model="state.orderData.serviceOrderInfo"  label-width="80px" label-position="left">
							<el-row :gutter="35">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
									<el-row :gutter="35">
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="会员ID">
												<span>{{ state.orderData.serviceOrderInfo?.userId }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="会员姓名">
												<span>{{ state.orderData.serviceOrderInfo?.username }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="会员等级">
												<span>{{ state.orderData.serviceOrderInfo?.level }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="付费会员">
												<span>{{ state.orderData.serviceOrderInfo?.isMembership }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="开卡门店">
												<span>{{ state.orderData.serviceOrderInfo?.openNode }}</span>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="手机号">
												<span>{{ state.orderData.serviceOrderInfo?.phone }}</span>
											</el-form-item>
										</el-col>
                                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
											<el-form-item label="归属员工">
												<span>{{ state.orderData.serviceOrderInfo?.employee }}</span>
											</el-form-item>
										</el-col>
									</el-row>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</el-card>
			</el-col>
			<!-- 服务信息 -->
			<el-col :span="24">
				<el-card shadow="hover" class="mt15" header="服务信息">
					<el-row>
						<el-table :data="state.orderData.serviceCardInfo" border style="width: 100%">
							<el-table-column type="expand">
								<template #default="scope">
									<div>
										<p class="ml20">
											<span>
												<span v-for="(item,index) in scope.row.paymentList" :key="index">
													{{ item.payment }}:￥:{{ item.money }}元
												</span>
												销售人: 
												<span v-for="(item,index) in scope.row.rebateList" :key="index">
													{{ item.employee }}(ID:{{ item.id }}){{ item.proportion }}
												</span>
												<span>储值卡优惠：{{ scope.row.ppcAlterMoney }}</span>
												<span>手动优惠：{{ scope.row.alterMoney }}</span>
											</span>
										</p>
									</div>
								</template>
							</el-table-column>

							<el-table-column width="290px" label="服务信息">
								<template #default="scope">
									<div class="goodBox"  style="display: flex;justify-content: space-between;">
										<div style="display: flex;align-items: center;">
											<div style="width:48px; height: 48px;">
												<el-image style="width:48px; height: 48px;border-radius: 5px;" :src="scope.row.cover" fit="cover" />
											</div>
											<div class="ml5">
												<p class="px2 goodMsg">{{ scope.row.cardName }}</p>
												<p class="px2 goodMsg">{{ scope.row.cardType }}{{ scope.row.attrValues }}</p>
											</div>
										</div>
										<div class="mr15">
											x{{ scope.row.serTimes }}
										</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="服务员工">
								<template #default="scope">
									<span> {{ scope.row.serStaffName }} </span>
								</template>
							</el-table-column>
							<el-table-column label="划扣卡项">
								<template #default="scope">
									<span> {{ scope.row.ocid }} </span>
								</template>
							</el-table-column>
							<el-table-column label="手工费">
								<template #default="scope">
									<span> {{ scope.row.serviceRebate }} </span>
								</template>
							</el-table-column>
							<el-table-column label="计算手工">
                                <template  #default="scope">
									<span> {{ scope.row.enableServiveTimes == 1 ?'计算':'不计算'}}</span>
								</template>
                            </el-table-column>
							<el-table-column label="评价(数据存疑)">
								<template #default="scope">
									<span> {{ scope.row.serviceCardInfo =='0'?'是':"否" }}</span>
								</template>
							</el-table-column>
						</el-table>
					</el-row>
				</el-card>
			</el-col>
            <!-- 划扣信息 -->
			<el-col :span="24">
				<el-card shadow="hover" class="mt15" header="划扣卡项">
					<el-row>
						<el-table :data="state.orderData.orignOrderInfo" border style="width: 100%">
							<el-table-column type="expand">
								<template #default="scope">
									<div>
										<p class="ml20">
											<span>
												<span v-for="(item,index) in scope.row.paymentList" :key="index">
													{{ item.payment }}:￥:{{ item.money }}元
												</span>
												销售人: 
												<span v-for="(item,index) in scope.row.rebateList" :key="index">
													{{ item.employee }}(ID:{{ item.id }}){{ item.proportion }}
												</span>
												<span>储值卡优惠：{{ scope.row.ppcAlterMoney }}</span>
												<span>手动优惠：{{ scope.row.alterMoney }}</span>
											</span>
										</p>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="划扣卡项" width="320px">
								<template #default="scope">
									<div class="goodBox"  style="display: flex;justify-content: space-between;">
										<div style="display: flex;align-items: center;">
											<div style="width:48px; height: 48px;">
												<el-image style="width:48px; height: 48px;border-radius: 5px;" :src="scope.row.cover" fit="cover" />
											</div>
											<div class="ml5">
												<p class="px2 goodMsg">{{ scope.row.title }}</p>
												<p class="px2 goodMsg">{{ scope.row.cardType }}{{ scope.row.attrValues }}</p>
											</div>
										</div>
										<div class="mr15">
											
										</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="来源订单">
								<template  #default="scope">
									<span>{{ scope.row.snkey }}</span>
								</template>
							</el-table-column>
							<el-table-column label="订单金额">
								<template  #default="scope">
									<span>{{ scope.row.orderPrice }}</span>
								</template>
							</el-table-column>
							<el-table-column label="实付金额">
								<template  #default="scope">
									<span>{{ scope.row.payPrice }}</span>
								</template>
							</el-table-column>
							<el-table-column label="购买次数/时长">
                                <template  #default="scope">
									<span>{{ scope.row.totalTimes }}</span>
									<span v-if="scope.row.cardType!==0">/
										<span v-if="scope.row.validity>12">{{ scope.row.validity }}日</span>
										<span v-if="scope.row.validity<=12">{{ scope.row.validity }}月</span>
									</span>
								</template>
                            </el-table-column>
							<el-table-column label="划扣次数">
								<template #default="scope">
									<span>{{ scope.row.times }}</span>
								</template>
							</el-table-column>
							<el-table-column align="center" label="剩余次数/时长" prop="resNumOrDay">
								<template #default="scope">
								{{ scope.row.leftTimes }}次
								<span v-if="scope.row.cardType!==0">/
								<span v-if="scope.row.leftDays>12">{{ scope.row.leftDays }}日</span>
								<span v-if="scope.row.leftDays<=12">{{ scope.row.leftDays }}月</span></span>
								</template>
							</el-table-column>
							<el-table-column label="消耗金额">
								<template #default="scope">
									<span> {{ scope.row.consumeMoney }} </span>
								</template>
							</el-table-column>
							<el-table-column label="计算手工">
								<template #default="scope">
									{{ scope.row.enableServiveTimes == 1 ?'计算':'不计算'}}
								</template>
							</el-table-column>
                            <el-table-column label="计算消耗">
                                <template  #default="scope">
									<span> {{ scope.row.enableConsumeRebate == 1 ?'计算':'不计算'}}</span>
								</template>
                            </el-table-column>
						</el-table>
					</el-row>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts" name="order">
import { reactive, onMounted } from 'vue';
import { orderServiceDetails } from '/@/api/order';
import type { serveOrderDetailsData } from "/@/types/order";
import { useRoute } from 'vue-router';
const route = useRoute();



// 定义变量内容
const state = reactive({
	orderForm: {
		name: '',
		email: '',
		autograph: '',
		occupation: '',
		phone: '',
		sex: '',
	},
	orderData: {} as serveOrderDetailsData
});


onMounted( async() => {
	const { results } = await orderServiceDetails(route.query.id);
	state.orderData = results;
})

// 总个数
const goodNumberFun = (item:Array) => {
	let num = 0
	// item.map((item) => {
	// 	num += item.number
	// })
	return num;
};
// 原件
const goodMoneyFun = (item:Array) => {
	let num = 0.00
	// item.map((item) => {
	// 	num += item.number
	// })
	return num;
};


</script>

<style scoped lang="scss">
@import '../../../theme/mixins/index.scss';

.order {
	.order-user {
		height: 130px;
		display: flex;
		align-items: center;

		.order-user-left {
			width: 100px;
			height: 130px;
			border-radius: 3px;

			:deep(.el-upload) {
				height: 100%;
			}

			.order-user-left-upload {
				img {
					width: 100%;
					height: 100%;
					border-radius: 3px;
				}

				&:hover {
					img {
						animation: logoAnimation 0.3s ease-in-out;
					}
				}
			}
		}

		.order-user-right {
			flex: 1;
			padding: 0 15px;

			.order-title {
				font-size: 18px;
				@include text-ellipsis(1);
			}

			.order-item {
				display: flex;
				align-items: center;
				font-size: 13px;

				.order-item-label {
					color: var(--el-text-color-secondary);
					@include text-ellipsis(1);
				}

				.order-item-value {
					@include text-ellipsis(1);
				}
			}
		}
	}

	.order-info {
		.order-info-more {
			float: right;
			color: var(--el-text-color-secondary);
			font-size: 13px;

			&:hover {
				color: var(--el-color-primary);
				cursor: pointer;
			}
		}

		.order-info-box {
			overflow: hidden;

			.order-info-ul {
				list-style: none;

				.order-info-li {
					font-size: 13px;
					padding-bottom: 10px;

					.order-info-li-title {
						display: inline-block;
						@include text-ellipsis(1);
						color: var(--el-text-color-secondary);
						text-decoration: none;
					}

					& a:hover {
						color: var(--el-color-primary);
						cursor: pointer;
					}
				}
			}
		}
	}

	.order-pay-detail{

	}
	.goodBox {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		overflow: hidden;
		.goodMsg {
			@include text-ellipsis(2);
		}
		p {
			@include text-ellipsis(1);
		}
	}

}
</style>
